<template>
  <div class="filtr-container">
    <form @submit.prevent="handleFilter" class="filter-form">
      <div class="filter-group">
        <div class="filter-item">
          <label>请求人姓名：</label>
          <input
            type="text"
            v-model="filterFields.requesterName"
            placeholder="请输入请求人姓名"
          />
        </div>
        <div class="filter-item">
          <label>任务类别：</label>
          <el-select
            v-model="filterFields.taskCategory"
            placeholder="任务类别"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <label>任务状态：</label>
          <el-select
            v-model="filterFields.taskStatus"
            placeholder="任务状态"
            clearable
          >
            <el-option
              v-for="item in taskStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <span>开始时间：</span>
          <el-date-picker
            v-model="filterFields.createdAtStart"
            type="date"
            placeholder="开始时间"
            :disabled-date="disabledDate"
            :shortcuts="shortcuts"
            @change="formatDate('createdAtStart')"
          />
        </div>
        <div class="filter-item">
          <span>结束时间：</span>
          <el-date-picker
            v-model="filterFields.createdAtEnd"
            type="date"
            placeholder="结束时间"
            :disabled-date="disabledDate"
            :shortcuts="shortcuts"
            @change="formatDate('createdAtEnd')"
          />
        </div>
      </div>
      <div class="filter-buttons">
        <button type="submit">筛选</button>
        <button type="button" @click="clearFilter">清空筛选</button>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue';
import taskCotgary from '../utils/taskCotgray.js';
import dayjs from 'dayjs'; // 引入 dayjs
import taskStatusMap from '../utils/taskStatusMap.js';

const filterFields = ref({
  requesterName: '',
  taskCategory: null,
  taskStatus: null,
  createdAtStart: null,
  createdAtEnd: null,
});

const options = taskCotgary;

// 任务状态映射（数字映射）
const taskStatus = taskStatusMap;

const emit = defineEmits(['filter']);

// 禁用未来的日期
const disabledDate = (date) => {
  return date.getTime() > Date.now(); // 禁用未来的日期
};

// 快捷选择
const shortcuts = [
  {
    text: '今天',
    onClick(picker) {
      picker.$emit('pick', new Date());
    },
  },
  {
    text: '本周',
    onClick(picker) {
      const startOfWeek = new Date();
      startOfWeek.setDate(
        startOfWeek.getDay() === 0
          ? startOfWeek.getDate() - 6
          : startOfWeek.getDate() - startOfWeek.getDay(),
      );
      picker.$emit('pick', startOfWeek);
    },
  },
];

// 表单提交处理
const handleFilter = () => {
  if (filterFields.value.taskCategory) {
    const selectedOption = options.find(
      (options) => options.label === filterFields.value.taskCategory,
    );
    if (selectedOption) {
      filterFields.value.taskCategory = selectedOption.value;
    }
  }

  emit('filter', filterFields.value); // 传递筛选条件
};

// 清空筛选条件并发起请求
const clearFilter = () => {
  filterFields.value = {
    requesterName: '',
    taskCategory: null,
    taskStatus: null,
    createdAtStart: null,
    createdAtEnd: null,
  };
  handleFilter(); // 清空筛选条件后发起请求
};

// 格式化日期
const formatDate = (field) => {
  if (filterFields.value[field]) {
    filterFields.value[field] = dayjs(filterFields.value[field]).format(
      'YYYY-MM-DD',
    ); // 格式化为 'YYYY-MM-DD'
  }
};
</script>

<style scoped lang="less">
.filter-form {
  display: block;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
}

.filter-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
}

.filter-buttons button {
  padding: 6px 12px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #66b1ff;
}

button[type='button'] {
  background-color: #409eff;
}

button[type='button']:hover {
  background-color: #66b1ff;
}
</style>
